<template>
  <div class="container">
    <div class="intellImg">
      <img src="~@/assets/intell/login.png" alt="" />
    </div>

    <div class="intell">
      <span class="welcome">欢迎登录</span>
      <span class="intellText">国家智能社会治理实验基地网络安全体系</span>
      <el-input
        class="phoneInput"
        v-model="info.phone"
        placeholder="手机号/邮箱"
      ></el-input>
      <el-input v-model="info.password" placeholder="密码"></el-input>
      <el-button type="primary" round @click="goto()">登录</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: { phone: "", password: "" },
    };
  },
  methods: {
    goto() {
      this.$router.push({ path: "/index" });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1920px;
  height: 1080px;
  display: flex;

  .intellImg {
    margin-left: 195px;
    margin-top: 211px;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .intell {
    width: 50%;
    margin-top: 321px;
    margin-left: 321px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    .welcome {
      font-weight: 400;
      font-size: 48px;
      line-height: 72px;
      color: #000000;
    }
    .intellText {
      font-weight: 400;
      font-size: 24px;
      line-height: 28px;
      color: #232323;
      margin-bottom: 36px;
    }
    ::v-deep .el-input__inner {
      width: 380px;
      height: 48px;
      background: #e4ebf7;
      border-radius: 36px;
      font-size: 18px;
      &::placeholder {
        font-size: 18px;
      }
    }
    ::v-deep .el-button--primary {
      padding: 16px 80px;
      background: #597ef7;
      border-radius: 36px;
      font-size: 21px;
      margin-top: 36px;
      line-height: 32px;
    }
  }
}
</style>